<template>
  <div id="app">
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input
          class="new-todo"
          autofocus
          autocomplete="off"
          placeholder="What needs to be done?"
          v-model="newTodo"
          @keyup.enter="addTodo"
        />
      </header>

      <section
        class="main"
        v-show="todos.length"
        v-cloak
      >
        <input
          class="toggle-all"
          type="checkbox"
          v-model="allDone"
        />
        <ul class="todo-list">
          <li
            v-for="(todo,index) in filteredTodos"
            class="todo"
            :key="index"
            :class="{ completed: todo.completed, editing: todo == editedTodo }"
          >
            <div class="view">
              <input
                class="toggle"
                type="checkbox"
                v-model="todo.completed"
              />
              <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
              <button
                class="destroy"
                @click="removeTodo(index)"
              ></button>
            </div>
            <input
              class="edit"
              type="text"
              v-model="todo.title"
              v-show="todo == editedTodo"
              v-focus="todo == editedTodo"
              @blur="doneEdit(todo)"
              @keyup.enter="doneEdit(todo)"
              @keyup.esc="cancelEdit(todo)"
            />
          </li>
        </ul>
      </section>
      <footer
        class="footer"
        v-show="todos.length"
        v-cloak
      >
        <span class="todo-count">
          <strong>{{ remaining }}</strong>
          {{ remaining | pluralize }} left
        </span>
        <ul class="filters">
          <li @click="filterTodo('all')">
            <a
              href="#/all"
              :class="{ selected: visibility == 'all' }"
            >All</a>
          </li>
          <li @click="filterTodo('active')">
            <a
              href="#/active"
              :class="{ selected: visibility == 'active' }"
            >Active</a>
          </li>
          <li @click="filterTodo('completed')">
            <a
              href="#/completed"
              :class="{ selected: visibility == 'completed' }"
            >Completed</a>
          </li>
        </ul>
        <button
          class="clear-completed"
          @click="removeCompleted"
          v-show="todos.length > remaining"
        >Clear completed</button>
      </footer>
    </section>
    <footer class="info">
      <p>Double-click to edit a todo</p>
      <p>
        Written by
        <a href="http://evanyou.me">Evan You</a>
      </p>
      <p>
        Part of
        <a href="http://todomvc.com">TodoMVC</a>
      </p>
    </footer>
  </div>
</template>

<script>
import { todoStorage, filters } from "../../localStorage/index";
import { directive } from "../../directives/index";

export default {
  data() {
    return {
      todos: todoStorage.fetch(),
      newTodo: "",
      editedTodo: null,
      visibility: "all",
    };
  },

  methods: {
    addTodo() {
      var value = this.newTodo && this.newTodo.trim();
      if (!value) {
        return;
      }
      this.todos.push({
        id: this.todos.length, 
        title: this.newTodo,
        completed: false, 
      });
      this.newTodo = "";
    },

    // 删除
    removeTodo(index) {
      this.todos.splice(index, 1);
    },

    // 编辑todo
    editTodo(todo) {
      this.editedTodo = todo;
      this.beforeEditCache = todo.title;
    },

    // 数据修改时调用的方法
    doneEdit(todo, index) {
      // if (!this.editedTodo) {
      //   return;
      // }
      this.editedTodo = null;
      todo.title = todo.title.trim();
      if (!todo.title) {
        this.removeTodo(index);
      }
    },
    cancelEdit(todo) {
      this.editedTodo = null;
      todo.title = this.beforeEditCache;
    },
    filterTodo(value) {
      this.visibility = value;
    },

    removeCompleted() {
      this.todos = filters.active(this.todos);
    },
  },

  watch: {
    todos: {
      handler(newVl) {
        todoStorage.save(newVl);
      },
      deep: true,
    },
  },

  computed: {
    filteredTodos() {
      return filters[this.visibility](this.todos);
    },
    remaining() {
      return filters.active(this.todos).length;
    },
    allDone: {
      get() {
        return this.remaining === 0;
      },
      set(value) {
        this.todos.forEach((todo) => {
          todo.completed = value;
        });
      },
    },
  },

  filters: {
    pluralize(n) {
      return n > 1 ? "items" : "item";
    },
  },

  directives: {
    focus: directive.focus,
  },
};
</script>

<style src="./css/main.css"></style>
<style scoped>
[v-cloak] {
  display: none;
}
</style>